<template>
  <div class="login">
    <div class="login-wrapper center-wrapper">
      <div class="login-card">
        <div class="login-card-left">
          <div class="login-card-left-box">
            <div class="logo">
              <img src="@/assets/img/login/login_left_logo.png" />
            </div>

            <div class="desc">Ai community slogan</div>
          </div>
        </div>

        <div class="login-card-right">
          <div class="card-wrapper">
            <template v-if="loginStore.currentCardType === 'login'">
              <login-card />
            </template>
            <template v-else-if="loginStore.currentCardType === 'register'">
              <register-card />
            </template>
            <template v-else>
              <forgot-card />
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginCard from './cpns/LoginCard.vue'
import RegisterCard from './cpns/RegisterCard.vue'
import ForgotCard from './cpns/ForgotCard.vue'
import useLoginStore from '@/stores/login/login'

const loginStore = useLoginStore()
</script>

<style lang="less" scoped>
.login {
  overflow: hidden;
  margin-bottom: 100px;

  .login-wrapper {
    padding-top: 107px;

    .login-card {
      display: flex;
      width: 100%;
      height: 963px;
      background-color: #ffffff;
      border-radius: 20px;
    }

    .login-card-left {
      width: 710px;
      height: 100%;
      background: url('@/assets/img/login/login_card_bg.png') no-repeat center center / 100% 100%;

      .login-card-left-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 225px;

        .logo {
          img {
            width: 319px;
          }
        }

        .desc {
          font-size: 26px;
          font-weight: 300;
          color: #ffffff;
          line-height: 26px;
          letter-spacing: 9px;
          margin-top: 40px;
          color: #ffffff;
        }
      }
    }

    .login-card-right {
      position: relative;
      flex: 1;

      .card-wrapper {
        margin: 200px 0 0 200px;
      }
    }
  }
}
</style>
